area-root<script>
import { projectDecomApi, ProDesignDecomApi } from '@/services/ProjectCenter'
export default {
  name: 'scroll',
  // ['p_index']
  props: {
    isProDesDecompPage: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    p_index: String,
    chartId: Number,
  },
  data () {
    return {
      layerList: [],
      treeList: [],
      floorArr: [],
      count: 0,
      visible: false,
      project_id: '',
      projectList: {}
    }
  },
  methods: {
    commonFunc () {//通用函数
      if (this.isProDesDecompPage == false) {
        this.getChartList()
      } else {
        this.getProDesignDecomChart();//项目设计与分解页面的图表
      }
    },
    // 滚动到底部
    scrollToBottom () {
      this.$nextTick(() => {
        var scrollDiv = document.getElementById('scrollDiv')
        // scrollDiv.scrollTop = (scrollDiv.scrollHeight - 650);
        scrollDiv.scrollTop = (scrollDiv.scrollHeight);
        console.log('测试scrollDiv.scrollTop=', scrollDiv.scrollTop)
      })
    },
    getProDesignDecomChart () {//项目设计与分解页面的图表调用该接口
      ProDesignDecomApi.getResWbs({
        params: {
          project_id: this.project_id || '22',//项目的主键值
        }
      }).then((res) => {
        let data = res.data;
        if (data) {
          this.getCommonChartData(data);//项目分解/项目设计与分解页面的图表数据结构
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    getCommonChartData (data) {//项目分解/项目设计与分解页面的图表数据结构
      var obj = data.otherData
      for (let i in obj) {
        this.layerList.push(obj[i]) // 属性
      };
      this.treeList = data.treeData
      this.layerList = this.layerList
      this.treeList = this.treeList
      this.scrollToBottom() // 滚动到底部
    },
    getChartList () {
      if (this.project_id) {
        projectDecomApi.getTableData({
          params: {
            project_id: this.project_id || '22'
          }
        }).then(res => {
          // var obj = res.data.floorData
          let data = res.data;
          if (data) {
            this.getCommonChartData(data);//项目分解/项目设计与分解页面的图表数据结构
          }
        })
      }
    }
  },
  render () {
    let renderMenu = (layerList) => {
      return layerList.map(item => {
        return (
          <li {...{ attrs: { 'class': 'div-ul-li' } }}>

          </li>
        )
      })
    }
    let renderChart = (treeList, maxDepth, nowDepth) => {
      return treeList.map(item => {
        if (item.children) {
          // if (item.wbs_type !== '3') {
          if (item) {
            let children = [...item.children]
            if (Array.isArray(children)) {

              children.sort((a, b) => {
                return Number(a.sort_no) - Number(b.sort_no)
              })
            }

            return (
              //  && item.componentData.stepType === '' ? 'floor-li' : item.wbs_type === '4' && item.componentData.stepType === 1 ? 'floor-li-one' : item.wbs_type === '4' && item.componentData.stepType === 2 ? 'floor-li-two' : item.wbs_type === '4' && item.componentData.stepType === 3 ? 'floor-li-three'
              <li {...{ attrs: { 'class': item.wbs_type === '4' ? 'floor-li-one' : 'area-root-li' } }}>
                <div {...{ attrs: { 'class': item.wbs_type === '3' ? 'flex-div' : 'div-box', 'index': item.wbs_type } }}>
                  {
                    renderChart(children, maxDepth, nowDepth + 1)
                  }
                </div>
                <div>{item.wbs_name}</div>
              </li>
            )
          } else {
            // 当前深度与最大深度对比，如果没有到达最大深度，渲染一个空节点占位
            let data = maxDepth === nowDepth ? item.children : [item]
            return (
              // && item.componentData.stepType === '' ? 'floor-li' : item.wbs_type === '4' && item.componentData.stepType === 1 ? 'floor-li-one' : item.wbs_type === '4' && item.componentData.stepType === 2 ? 'floor-li-two' : item.wbs_type === '4' && item.componentData.stepType === 3 ? 'floor-li-three' :
              <li {...{ attrs: { 'class': item.wbs_type === '4' ? 'floor-li-one' : 'area-root-li' } }}>
                <div {...{ attrs: { 'class': item.wbs_type === '3' ? 'flex-div' : 'div-box', 'index': item.wbs_type } }}>
                  {
                    renderChart(data, maxDepth, nowDepth + 1)
                  }
                </div>
                <div style="visibility:hidden;">{maxDepth + '--' + nowDepth}</div>
              </li>
            )
          }
        } else {
          if (item.wbs_type === '4') {
            return (
              <el-popover {...{ attrs: { 'trigger': 'hover', 'v-model': 'visible', 'placement': 'top' } }}>
                <p {...{ attrs: { 'class': 'normal-p' } }}><span>{item.componentData.buildFloor.build_no}</span><span>-</span><span>{item.componentData.buildFloor.floor_no}</span></p>
                <li slot="reference" {...{ attrs: { 'class': item.componentData.stepType === '' ? 'floor-li-one' : 'area-root-li' } }}>
                  {item.wbs_type === '4' ? '' : item.wbs_name}
                </li>
              </el-popover>
            )
          } else {
            return (
              <li {...{ attrs: { 'class': 'area-root-li' } }}>
                {item.wbs_name}
              </li>
            )
          }
        }
      })
    }
    return (
      <div {...{ attrs: { 'class': 'div-style' } }}>
        <div {...{ attrs: { 'class': 'div-style-next' } }}>
          <ul {...{ attrs: { 'class': 'div-ul' } }}>

          </ul>
          <ul {...{ attrs: { 'class': 'mid-left-desc' } }}>
          </ul>
          <ul {...{ attrs: { 'class': 'tree_num' } }}>
            {
              renderMenu(this.layerList)
            }
          </ul>
        </div>
        <div {...{ attrs: { 'class': 'mid-right-slid' } }} >
          <div {...{ attrs: { 'class': 'onp-div' } }} >
            <div {...{ attrs: { 'class': 'mid-size' } }} >
              <el-col {...{ attrs: { 'class': 'normal-col' } }} id="scrollDiv">
                <el-col {...{ attrs: { 'class': 'col-lh-top' } }}>
                  <ul {...{ attrs: { 'class': 'area-root' } }}>
                    {
                      renderChart(this.treeList, 7, 0)
                    }
                  </ul>

                </el-col>
              </el-col>
            </div>
          </div>
        </div>
      </div>
    )
  },
  watch: {
    p_index (newVal) {
      if (newVal == '1') {
        this.layerList.length = 0;
        this.treeList.length = 0;
        this.commonFunc();
      }
    },
    chartId (newVal) {
      this.project_id = newVal
      this.layerList.length = 0
      this.treeList.length = 0
      this.commonFunc();//通用函数
      // if (newVal == '1') {
      //   this.layerList.length = 0
      //   this.treeList.length = 0
      //   this.getChartList()
      // }
    },
    getChart (newVal) {
      this.project_id = newVal;
      this.layerList.length = 0;
      this.commonFunc();//通用函数
    },
    getCount (newVal) {
      this.layerList.length = 0;
      this.commonFunc();//通用函数
    }
  },
  computed: {
    getChart () {//图表
      let store = this.$store.state.decomTree[0]
      let local = JSON.parse(window.localStorage.getItem('decomTree'))[0]
      if (local) {
        this.projectList = local
      } else {
        this.projectList = store
      }
      return this.projectList.project_id
    },
    getCount () {
      let storeCount = this.$store.state.nodeCount
      let localCount = window.localStorage.getItem('SetNodeCount')
      if (localCount) {
        return localCount
      } else {
        return storeCount
      }
    }
  },
  mounted () {
    this.scrollToBottom()
  },
  created () {
    let store = this.$store.state.decomTree[0]
    let local = JSON.parse(window.localStorage.getItem('decomTree'))[0]
    let storeCount = this.$store.state.nodeCount
    let localCount = window.localStorage.getItem('SetNodeCount')
  }
}
</script>
<style lang="scss" scoped>
.div-style {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 97%;
  min-height: 320px;
  margin-top: 15px;
  padding-left: 8px;
}
.div-style-next {
  width: 30px;
  height: auto;
  margin-right: 20px;
}
.div-ul {
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-size: 14px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}
.div-ul-li {
  margin-top: 11.58px;
  margin-bottom: 1px;
  text-align: center;
  width: 100%;
  height: 20px;
  float: none;
  list-style: none;
}
.mid-left-desc {
  margin-top: 50px;
}
.tree_num {
  li {
    margin-top: 10px !important;
    text-align: right;
    height: 20px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    line-height: 20px;
    font-size: 14px;
  }
}
.mid-right-slid {
  width: 2000px;
  height: auto;
  overflow: auto;
  box-shadow: -10px 10px 11px rgba(234, 237, 241, 1);
  position: relative;
}
.onp-div {
  width: 1200px;
  // width: auto;
  // margin-top: 42.5px;
  position: absolute;
  bottom: 0px;
}
.mid-size {
  // height: 80;
}
.normal-col {
  overflow-x: auto;
}
.col-lh-top {
  width: auto;
  height: 700px;
  display: flex;
}
.div-box {
  overflow: hidden;
}
.area-root {
  // overflow: hidden;
  display: flex;
  // overflow-x: scroll;
  margin-right: 170px;
  height: 1100px;
  overflow: auto;
  .area-root-li {
    // float: left;
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    // height: 40px;
    margin-left: 5px;
    text-align: center;
    line-height: 30px;
    // border-top: 1px solid rgba(50, 50, 50, 1);
    border-bottom: 1px solid rgba(50, 50, 50, 1);
    // height: 750px;
    .div-box {
      display: flex;
      flex-direction: row;
      // height: 650px;
      // overflow: scroll;
    }
    .flex-div {
      display: flex;
      flex-direction: column;
      transform: rotate(180deg);
    }
  }
  .floor-li {
    // margin-top: 10px;
    width: 80px;
    // height: 20px;
    height: 0px;
    float: none;
    list-style: none;
    text-align: center;
  }
  .floor-li-one {
    margin-bottom: 10px;
    width: 80px;
    height: 20px;
    float: none;
    list-style: none;
    text-align: center;
    cursor: pointer;
    background: #ccc;
  }
  .floor-li-two {
    margin-bottom: 10px;
    width: 80px;
    height: 20px;
    float: none;
    list-style: none;
    text-align: center;
    cursor: pointer;
    background: #faad14;
  }
  .floor-li-three {
    margin-bottom: 10px;
    width: 80px;
    height: 20px;
    float: none;
    list-style: none;
    text-align: center;
    cursor: pointer;
    background: #1890ff;
  }
}
.normal-p {
  text-align: center;
  position: relative;
}
.normal-span {
  margin-right: 8px;
}
.normal-i {
  position: absolute;
  display: block;
  width: 12px;
  height: 12px;
  top: 50%;
  margin-top: -6px;
}
.i-one {
  background: #1890ff;
}
.i-two {
  background: #0943ff;
}
.i-three {
  background: #1443aa;
}
.i-four {
  background: #144399;
}
.i-five {
  background: #161388;
}
.i-six {
  background: #162088;
}
.i-seven {
  background: #162055;
}
</style>
